<template>
  <div class="container">
    <el-card class="box-card">
      <div>共计100页</div>
      <el-row>
        <el-button type="danger">普通excel导出</el-button>
        <el-button type="info">复杂表头excel导出</el-button>
        <el-button type="success">excel导入</el-button>
        <el-button type="primary" @click="onAddRole">新增员工</el-button>
      </el-row>
    </el-card>
    <el-dialog
      title="新增员工"
      :visible.sync="roleAddVisible"
      @close="onRoleAddClose"
    >
      <el-form :model="addRole">
        <el-form-item label="姓名" :label-width="formLabelWidth" required>
          <el-input v-model="addRole.username" style="width:50%"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" required>
          <el-input v-model="addRole.mobile" style="width:50%"></el-input>
        </el-form-item>
        <el-form-item label="入职时间" :label-width="formLabelWidth" required>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="addRole.timeOfEntry" style="width:50%" format="yyyy-MM-dd"></el-date-picker>
          </el-col>
        </el-form-item>
         <el-form-item label="聘用形式" :label-width="formLabelWidth" required>
          <el-select v-model="addRole.formOfEmployment" placeholder="请选择聘用形式" style="width:50%">
            <el-option label="正式" :value="1"></el-option>
            <el-option label="非正式" :value="2"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="工号" :label-width="formLabelWidth" required>
          <el-input v-model="addRole.workNumber" style="width:50%"></el-input>
        </el-form-item>
         <el-form-item label="部门" :label-width="formLabelWidth" required>
          <el-input v-model="addRole.departmentName" style="width:50%"  @click.native="showDepartmentTree"></el-input>
          <el-tree :data="companyTree" :props="{children: 'children', label: 'name'}" v-show="departmentTreeVisible" @node-click="onDepartmentTreeNodeClick" default-expand-all></el-tree>
        </el-form-item>
         <el-form-item label="转正时间" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-date-picker v-model="addRole.correctionTime" type="date" placeholder="选择日期" style="width:50%" format="yyyy-MM-dd"></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button
          v-loading="loading"
          type="primary"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.5)"
          class="loading"
          @click="onRoleAddOk"
        >
          {{ loading ? '' : '确定' }}
        </el-button>
        <el-button @click="onRoleAddClose">取消</el-button>
      </div>
    </el-dialog>
    <el-card class="table-wrapper">
      <my-table
        :table-props="{
          data: employeesList.rows,
          border: true
        }"
        :columns="[
          { label: '序号', prop: 'index', width: 50, align: 'center' },
          { label: '姓名', prop: 'username', width: 100, align: 'center' },
          { label: '头像', slotName: 'avatar', align: 'center' }, // 带插槽
          { label: '手机号', prop: 'mobile', width: 150, align: 'center' },
          { label: '工号', prop: 'workNumber', width: 80, align: 'center' },
          { label: '聘用形式', prop: 'formOfEmployment', width: 80, align: 'center' },
          { label: '部门', prop: 'departmentName', width: 150, align: 'center' },
          { label: '入职时间', prop: 'timeOfEntry', width: 150, align: 'center' },
          { label: '状态', slotName: 'status', align: 'center' }, // 带插槽
          { label: '操作', slotName: 'operators', width: 300, align: 'center', fixed: 'right' }, // 带插槽
        ]"
        :pagination-props="{
          layout: 'total, pager',
          total: employeesList.total
        }"
        :pagination-events="events"
      >
        <template #avatar>
          <div class="avatar">
            <img src="https://img1.baidu.com/it/u=1960292808,1761809160&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1659978000&t=89036a315babc710e9016507ea96680b" alt="">
          </div>
        </template>
        <template #status>
          <el-switch value />
        </template>
        <template v-slot:operators="scope">
          <el-button type="text" size="small" @click="onRowClick(scope.row)">查看</el-button>
          <el-button type="text" size="small" @click="onRowClick(scope.row)">转正</el-button>
          <el-button type="text" size="small" @click="onRowClick(scope.row)">调岗</el-button>
          <el-button type="text" size="small" @click="onRowClick(scope.row)">离职</el-button>
          <el-button type="text" size="small" @click="onRoleClick(scope.row)">角色</el-button>
          <el-button type="text" size="small" @click="onDelClick(scope.row)">删除</el-button>
        </template>
      </my-table>
    </el-card>

    <!-- 角色详情弹窗 -->
    <el-dialog
      title="分配角色"
      :visible.sync="roleDetailVisible"
      width="400px"
      @close="onRoleDetailClose"
    >
      <el-checkbox-group
        v-model="roleDetailCheckList"
      >
        <el-checkbox
          v-for="role in roleList.rows"
          :key="role.id"
          :label="role.id"
        >
          {{ role.name }}
        </el-checkbox>
      </el-checkbox-group>

      <span slot="footer" class="dialog-footer">
        <el-button @click="onRoleDetailClose">取消</el-button>
        <el-button type="primary" @click="onRoleDetailOk">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
import * as roleApi from '@/api/role'
import { tableDel } from '@/store/utils/tableDel'
import { tableAdd } from '@/store/utils/tableAdd'

let currentId = null

export default {
  name: 'Employee',
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      events: {
        'current-change': this.onCurrentPageChange
      },
      roleDetailVisible: false,
      roleDetailCheckList: [],
      roleAddVisible: false,
      addRole: {},
      formLabelWidth: '120px',
      roleDelVisible: false,
      departmentTreeVisible: false,
      loading: false
    }
  },
  computed: {
    ...mapState('employees', [
      'employeesList'
    ]),
    ...mapState('role', [
      'roleList',
      'roleDetail'
    ]),
    ...mapState('company', [
      'companyList'
    ]),
    ...mapGetters('company', ['companyTree'])
  },
  methods: {
    ...mapActions('employees', [
      'updateEmployeesList'
    ]),
    ...mapActions('role', [
      'updateRoleList',
      'updateRoleDetail'
    ]),
    ...mapActions('company', [
      'updateCompanyList'
    ]),
    // 当前页改变时
    onCurrentPageChange(currentPage) {
      this.currentPage = currentPage
      this.updateEmployeesList({
        page: this.currentPage,
        size: this.pageSize
      })
    },
    // 点击角色按钮
    async onRoleClick(row) {
      this.roleDetailVisible = true
      await this.updateRoleDetail(row.id)
      // 返显
      this.roleDetailCheckList = this.roleDetail.roleIds
      currentId = row.id
    },
    // 点击角色取消按钮
    onRoleDetailClose() {
      this.roleDetailCheckList = []
      this.roleDetailVisible = false
    },
    // 点击角色确认按钮
    onRoleDetailOk() {
      console.log(this.roleDetailCheckList)
      roleApi.updateRoleDetail(currentId, this.roleDetailCheckList)
      this.onRoleDetailClose()
    },
    // 点击新增员工按钮 弹出新增框
    onAddRole() {
      this.roleAddVisible = true
      this.updateCompanyList()
      console.log(this.companyList)
    },
    // 关闭新增框
    onRoleAddClose() {
      this.roleAddVisible = false
    },
    // 点击确定按钮 新增员工
    async onRoleAddOk() {
      this.loading = true
      await tableAdd('/sys/user', this.addRole)
      this.roleAddVisible = false
      this.addRole = {}
      this.updateEmployeesList({
        page: this.currentPage,
        size: this.pageSize
      })
    },
    // 删除按钮
    async onDelClick(item) {
      await tableDel(item.id, '/sys/user/', `角色 "${item.username}" `)
      this.updateEmployeesList({
        page: this.currentPage,
        size: this.pageSize
      })
    },
    onRowClick(row) {
      console.log(row)
    },
    showDepartmentTree() {
      this.departmentTreeVisible = true
    },
    onDepartmentTreeNodeClick(data) {
      this.addRole.departmentName = data.name
      this.departmentTreeVisible = false
    }
  },
  created() {
    this.updateRoleList({
      page: this.currentPage,
      size: this.pageSize
    })
    this.updateEmployeesList({
      page: this.currentPage,
      size: this.pageSize
    })
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/common.scss";

.container {
  @include avatar(20px);
  padding: 16px;

  .avatar {
    display: inline-block;
  }

  .table-wrapper {
    margin-top: 16px;

  }
}
::v-deep .el-card__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  .loading {
    width: 70px;
  }

}
::v-deep .el-loading-spinner {
  margin-top: -8px;
  i {
    font-size: 16px;
  }
}
</style>
